<template>
	<div class="cps-view" :class="$hasEditPermission('/BHView') ? '' : 'maskDisabled1'">
		<div class="" :class="$hasEditPermission('/BHView') ? '' : 'maskDisabled2'"
			style="width: 1029px;height: 100% !important;">
			<ux-grid ref="singleTable" :data="prposTabelData" :header-cell-style="{
				color: 'rgba(0, 0, 0, 0.85)',
				fontSize: '14px',
				textAlign: 'left',
				fontWeight: 'bold',
				padding: '0 0 0 10px',
				height: '32px',
			}" :cell-style="{
				color: 'rgba(96,98,102,1)',
				fontSize: '14px',
				textAlign: 'left',
				padding: 0,
				height: '32px',
				width: '100%'
			}" :row-style="{
				color: 'rgba(96,98,102,1)',
				fontSize: '13px',
				textAlign: 'left',
				padding: 0,
				// height: '32px',
				width: '100%'
			}" @current-change="handleCurrentChange" highlight-current-row :height="tableHeight" v-loading="loading"
				element-loading-spinner="el-icon-loading" element-loading-background="#f8f8f8"
				:element-loading-text="$t('message.bhView.loading')">
				<template slot="empty"> No data </template>
				<ux-table-column property="wrk_cls_name" :title="$t('message.BSCps.detailTable.label_1')" :width="250">
					<template slot-scope="scope">
						<div class="yellow">{{ scope.row.dtlName }}</div>
					</template>
				</ux-table-column>
				<ux-table-column property="wrk_cls_name" :title="$t('message.BSCps.detailTable.label_2')" :width="500">
					<template slot-scope="scope">
						<el-input v-if="scope.row.pldwnSet == 0" v-model="scope.row.dtlData" class="table-input"
							@input="scope.row.dtlData = $setMaxLength(scope.row.dtlData, 100)">
						</el-input>
						<el-select class="long-ipt" v-if="scope.row.pldwnSet == 1" v-model="scope.row.dtlData"
							placeholder=" ">
							<el-option v-for="item in scope.row.list" :key="item" :label="item"
								:value="item"></el-option>
						</el-select>
					</template>
				</ux-table-column>
				<ux-table-column property="wrk_cls_name" :title="$t('message.BSCps.detailTable.label_3')" :width="260">
					<template slot-scope="scope">
						<div class="yellow">{{ scope.row.unitName }}</div>
					</template>
				</ux-table-column>


				<!-- <ux-table-column property="wrk_cls_name" :title="$t('message.BSCps.detailTable.label_4')" :width="265">
						<template slot-scope="scope">
							<div class="table-msg-view">
								<span>{{ $t("message.public.edit") }}</span>
								<span class="solid"></span>
								<span>{{ $t("message.public.delete") }}</span>
							</div>
						</template>
					</ux-table-column> -->
			</ux-grid>
		</div>
	</div>
</template>

<script>
import $ from "jquery";
import { getDetialsStyle } from "@/api/api";
import { showLoading, hideLoading } from "@/utils/loading";
import { getLocalStorage } from "../../../utils/storage";
import EventBus from "@/eventBus/bus";
import _ from 'lodash-es';
export default {
	name: "DetailCps",
	props: ['tab2SelectValue'],

	data() {
		return {
			userData: getLocalStorage('userData'),
			prposTabelData: [{}],
			prposTabelDataClone: [{}],
			tableHeight: 350,
			loading: false,
			macCode: 0
		};
	},

	components: {},
	watch: {
		macNamebValue: {
			deep: true,
			handler: function (newV, oldV) {
				this.initFn();
			},
		},
		tab2SelectValue: {
			deep: true,
			handler: function (newV, oldV) {
				this.getData();
			},
		},
		prposTabelData: {
            deep: true,
            handler: function (newV, oldV) {
                this.$emit('DataChangeFn', !_.isEqual(this.prposTabelData, this.prposTabelDataClone))
            },
        },
	},
	computed: {
		macNamebValue() {
			return this.$store.state.macNameb;
		},
	},
	methods: {
		handleCurrentChange(val) {
			console.log(val);
		},

		//initFn
		async getData() {
			showLoading();
			this.prposTabelData = [];
			this.prposTabelDataClone = [];
			let dataJson = {
				CtgCode: this.$store.state.ctgRowCode == "" ? 0 : this.$store.state.ctgRowCode,//	是	int	种别Code
				GrpCode: this.tab2SelectValue[0],//	是	int	选择的组的key值
				SmlCode: this.tab2SelectValue[1],//	是	int	选择的子组的key值
				macCode: this.$store.state.macType == 1 ? Number(this.$store.state.realMacCode) : this.macCode,//	是	int	MacCode
			}
			
			let res = await getDetialsStyle(dataJson);
			console.log(res);
			this.prposTabelData = _.cloneDeep(res.data.data);
			this.prposTabelDataClone = _.cloneDeep(res.data.data);
			this.$emit('DataChangeFn', false)
			hideLoading();
		},
		initFn() {
			this.getData();
		},
		setTable() {
			let heightStyle = $(".cps-view").height();
			this.tableHeight = heightStyle - 32;
		}
	},
	created() {
		this.getData();

	},
	mounted() {
		// let heightStyle = $(".cps-view").height();
		// this.tableHeight = heightStyle;
		this.setTable();
		EventBus.$on("clickRightTable", (val, macCode) => {
			this.macCode = macCode
			this.initFn();
		});
	},
	beforeDestroy() {
		EventBus.$off("clickRightTable");
	},
	destroyed() { },
};
</script>
<style lang="scss" scoped>
.cps-view {
	// position: relative;
	height: 100%;
	width: 100%;
	border: 1px solid #d3d3d3;
	max-height: calc(100% - 41px);
	// overflow: hidden;
	overflow-y: auto;

	.content-view {
		height: calc(100% - 41px);
		// background-color: red;
	}

	.footer {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin: 10px 0 0 0;

		button {
			width: 82px;
			height: 32px;
			background: #ffffff;
			border: 1px solid #d9d9d9;
			text-align: center;
			line-height: 32px;
			margin-right: 16px;
		}

		.okBTn {
			background: #106ebe;
			color: #fff;
		}
	}
}



::v-deep .elx-table.border--full .elx-table--fixed-left-wrapper {
	border: 0 none;
}

::v-deep .elx-table .elx-table--fixed-left-wrapper.scrolling--middle {
	box-shadow: none;
}

::v-deep .elx-table .elx-table--border-line {
	border-color: #c3c3c3;
}

// ::v-deep .elx-table.border--full .elx-body--column,
// .elx-table.border--full .elx-footer--column,
// .elx-table.border--full .elx-header--column {
//   background-image: linear-gradient(#c3c3c3, #c3c3c3),
//     linear-gradient(#c3c3c3, #c3c3c3);
// }

.table-msg-view {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	color: rgba(234, 43, 58, 1);
	font-size: 14px;

	span {
		cursor: pointer;
	}

	.solid {
		width: 1px;
		height: 14px;
		margin: 0 8px;
		cursor: none;
		background: rgba(233, 233, 233, 1);
	}
}

.table-msg-view-gray {
	color: rgba(128, 128, 128, 0.479) !important;
}

::v-deep .elx-cell {
	width: 100%;
	height: 32px;
	line-height: 32px;
	padding: 0;
	// padding-left: 10px;
}

.yellow {
	width: 100%;
	height: 100%;
	background-color: #ffffe1;
	padding-left: 10px;
	border-bottom: 1px solid #e6e1e1;

	::v-deep .el-input__inner {
		background-color: #ffffe1;
	}
}

.table-input {
	::v-deep .el-input__inner {
		background: none;
		border: 0 none;
		padding: 0;
		width: 100%;
		height: 100%;
		padding-left: 10px;
	}
}

.long-ipt {
	width: 100%;
	height: 32px;




	::v-deep .el-input__inner {
		background: none;
		border: 0 none;
		padding: 0;
		width: 100%;
		height: 32px;

		padding-left: 10px;
	}

	::v-deep .el-input__inner:focus {
		border: 1px solid #dcdfe6;
	}

	::v-deep .el-input__icon {
		line-height: 32px;
		color: #909399;
	}

	::v-deep .el-input__suffix {
		width: 32px;
		right: 0;
		background: #dee0e3;
	}
}
</style>
